<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/article.css" media="all" />
</head>
<body>
<div id="w3h_body">
  <div class="body_content">
    <!-- toc begin -->
    <h1 class="title">RT3001: 在某些条件下 Firefox Chrome Safari 的标准模式中 'text-decoration' 会作用于 IMG 元素上</h1>

    <ul class="toc">
      <li><a href="#standard_reference">标准参考</a> <span>•</span></li>
      <li><a href="#description">问题描述</a> <span>•</span></li>
      <li><a href="#influence">造成的影响</a> <span>•</span></li>
      <li><a href="#impacted_browsers">受影响的浏览器</a> <span>•</span></li>
      <li><a href="#analysis_of_issues">问题分析</a> <span>•</span></li>
      <li><a href="#solutions">解决方案</a> <span>•</span></li>
      <li><a href="#see_also">参见</a></li>
    </ul>
    <!-- toc end -->
    <div id="w3h_content">
      <!-- content begin -->
      <address class="author">作者：陆远</address>
      <h2 id="standard_reference">标准参考</h2>
      <p>用于修饰文本的 'text-decoration' 是很常用的 CSS 特性，经常用于超链接的效果展示，其最常用的4个特性值为：</p>
      <ul>
      <li>none：没有任何修饰；</li>
      <li>underline：下划线；</li>
      <li>overline：上划线；</li>
      <li>line-through：删除线。</li>
      </ul>
      <p>对于 'text-decoration'，W3C <a href="http://www.w3.org/TR/CSS21/text.html#lining-striking-props">CSS 2.1第16.3.1节</a>中还有如下叙述：</p>
<pre>
Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. If an element contains no text, user agents must refrain from rendering these text decorations on the element. For example, images will not be underlined.
</pre>
      <p>此外规范中还提到：</p>
<pre>
When specified on an inline element, it affects all the boxes generated by that element; for all other elements, the decorations are propageted to an anonymous inline box that wraps all the in-flow inline chirdren of the element, and to any block-level in-flow descendants.
</pre>
      <p>总结一下 W3C 中规范的内容就是：</p>
<pre>
如果 'text-decoration' 特性指定给一个块级元素，它会影响该元素所有的行内级后代。如果它指定给（或影响）一个行内元素，它会影响该元素产生的所有框（Box）。'text-decoration' 的 'underline'、'overline' 及 'line-through' 仅作用于文本。如果该元素没有内容或没有文本内容（例如 HTML 中的 IMG 元素），UA 必须忽略该属性。
</pre>
      <h2 id="description">问题描述</h2>
      <p>
        IE Opera Firefox(Q) Chrome(Q) Safari(Q) 均不会将 'text-decoration' 作用于 IMG 元素上，而 Firefox(S) Chrome(S) Safari(S) 中在某些条件下，
        对父元素设置的 'text-decoration' 特性会应用到 IMG 元素上。
      </p>

      <h2 id="influence">造成的影响</h2>
      <p>只有部分浏览器在特定条件下会将 'text-decoration' 作用于 IMG 元素上，导致各浏览器表现不一致。</p>

      <h2 id="impacted_browsers">受影响的浏览器</h2>
      <table class="list">
        <tr>
          <th>Firefox(S) Chrome(S) Safari(S)</th>
        </tr>
      </table>

      <h2 id="analysis_of_issues">问题分析</h2>
      <p>
        Firefox(S) 中与一组非空的行内级元素（inline、inline-block 或 inline-table）紧密相邻的 IMG 元素会应用父元素设置的 'text-decoration' 特性，
        而 Chrome(S) Safari(S) 中则是当 IMG 元素与 'inline' 元素（可以是内容为空或者只有空格的非匿名元素）紧密相邻时，会应用父元素设置的 'text-decoration' 特性。
        这里以下划线做测试，上划线和删除线表现与下划线表现一致。
      </p>
      <p>分析以下代码：</p>

<pre>
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;style type="text/css"&gt;
      span { text-decoration : underline; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3&gt;包含 inline&lt;/h3&gt;
    &lt;span&gt;&lt;img src="gchrome.png" /&gt;underline&lt;/span&gt;

    &lt;h3&gt;包含 inline-block&lt;/h3&gt;
    &lt;span&gt;&lt;img src="gchrome.png" /&gt;&lt;div style="display : inline-block;"&gt;underline&lt;/div&gt;&lt;/span&gt;

    &lt;h3&gt;包含 inline-table&lt;/h3&gt;
    &lt;span&gt;&lt;img src="gchrome.png" /&gt;&lt;div style="display : inline-table;"&gt;underline&lt;/div&gt;&lt;/span&gt;

    &lt;h3&gt;包含空内联元素&lt;/h3&gt;
    &lt;span&gt;&lt;img src="gchrome.png" /&gt;&lt;a&gt;&lt;/a&gt;&lt;/span&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

      <p>各浏览器中表现如下：<sup>1</sup></p>
      <table class="compare">
        <tbody>
          <tr>
            <th>IE Opera Firefox(Q) Chrome(Q) Safari(Q)</th>
            <th>Firefox(S)</th>
            <th>Chrome(S) Safari(S)</th>
          </tr>
          <tr>
            <td><img src="../../tests/RT3001/others.png" alt="" /></td>
            <td><img src="../../tests/RT3001/FirefoxS.png" alt="" /></td>
            <td><img src="../../tests/RT3001/WebkitS.png" alt="" /></td>
          </tr>
        </tbody>
      </table>
      <p class="comment">注1：该测试突出的是在各浏览器下是否在 IMG 元素上应用了 'text-decoration'，忽略其它方面的差异。</p>

      <p>需要注意的是只有当 IMG 元素与同级元素处于同一个 line-box 里，即两者都为内联元素（display 特性值为 inline、inline-block 或 inline-table）的时候，才会出现上述问题。经测试上划线和删除线也存在同样问题，有时上划线可能会被图片遮盖，但它仍是存在的，用透明图片测试可证明：</p>
      <p><img src="../../tests/RT3001/transparent.png" alt=""></p>

      <h2 id="solutions">解决方案</h2>
      <p>
        尽量给需要修饰的文本单独设置 'text-decoration' 特性；若需要给图片添加上划线或下划线，则使用 'border-top' 和 'border-bottom' 来模拟 'text-decoration'。
      </p>
            <p>
              此现象需要具体问题具体分析，如测试样例的代码，若要在此基础上去掉图片的下划线，可以考虑为 IMG 添加边白并调整相对位置以遮挡行框上的下划线，例如 img {padding-bottom:3px; background:white; position:relative; top:3px;}。
            </p>

      <h2 id="see_also">参见</h2>
      <h3>知识库</h3>
      <ul class="see_also">
        <li><a href="#">...</a></li>
      </ul>

      <h3>相关问题</h3>
      <ul class="see_also">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
      </ul>

      <div class="appendix">
        <h2>测试环境</h2>
        <table class="list">
          <tr>
            <th>操作系统版本:</th>
            <td>Windows 7 Ultimate build 7600</td>
          </tr>
          <tr>
            <th>浏览器版本:</th>
            <td>
              IE6<br />
              IE7<br />
              IE8<br />
              Firefox 3.6.8<br />
              Chrome 6.0.495.0 dev<br />
              Safari 5.0.1<br />
              Opera 10.61
            </td>
          </tr>
          <tr>
            <th>测试页面:</th>
            <td><a href="../../tests/RT3001/text-decoration_s.html">text-decoration_s.html</a><br />
              <a href="../../tests/RT3001/text-decoration_q.html">text-decoration_q.html</a>
            </td>
          </tr>
          <tr>
            <th>本文更新时间:</th>
            <td>2010-08-19</td>
          </tr>
        </table>

        <h2>关键字</h2>  
        <!-- keywords begin -->
        <p>text-decoration inline IMG 文本修饰 图片 内联元素</p>
        <!-- keywords end -->
      </div>
      <!-- content end -->
    </div>
  </div>
</div>
</body>
</html>
